<template>
    <div style="margin: 50px;" width="95%">
        <table border="1" width="100%" bgcolor="#F2F2F2" cellpadding="5px" cellspacing="0" style="margin: auto; text-align: center;">
            <thead>
                <tr>
                    <th width="25%">索引号</th>
                    <th width="25%">xxx</th>
                    <th width="25%">发布文号</th>
                    <th width="25%">渝森防指[2021]3号</th>
                </tr>
            </thead>	
            <tbody>
                <tr>
                    <td>主题分类</td>
                    <td>其他</td>
                    <td>体裁分类</td>
                    <td>其他</td>
                </tr>
			
                <tr>
                    <td>发布机构</td>
                    <td>市应急局</td>
                    <td>xxx</td>
                    <td>xxxx</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td>成文日期</td>
                    <td>2021.6.28</td>
                    <td>发布日期</td>
                    <td>2021.6.28</td>
                </tr>
            </tfoot>
        </table>
        <div class="tools" style="margin: 50px;">
            <fixed-action-bar>
                <el-button :theme="'default'" type="submit" :title="'基础按钮'" class="mr10" @click.stop="prePage"> 上一页</el-button>
                <el-button :theme="'default'" type="submit" :title="'基础按钮'" class="mr10" @click.stop="nextPage"> 下一页</el-button>
                <a class="page">{{ pageNum }}/{{ pageTotalNum }} </a>
                <el-button :theme="'default'" type="submit" :title="'基础按钮'" class="mr10" @click.stop="clock"> 顺时针</el-button>
                <el-button :theme="'default'" type="submit" :title="'基础按钮'" class="mr10" @click.stop="counterClock"> 逆时针</el-button>
            </fixed-action-bar>
        </div>
        <pdf ref="pdf" 
             :src="url" 
             :page="pageNum"
             :rotate="pageRotate"  
             @progress="loadedRatio = $event"
             @page-loaded="pageLoaded($event)" 
             @num-pages="pageTotalNum=$event" 
             @error="pdfError($event)" 
             @link-clicked="page = $event"
        />
    </div>
</template>

<script>
import pdf from 'vue-pdf'
export default {
    name: 'Home',
    components: {
        pdf
    },
    data() {
        return {
            url: 'http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf',
            pageNum: 1,
            pageTotalNum: 1,
            pageRotate: 0,
            // 加载进度
            loadedRatio: 0,
            curPageNum: 0
        }
    },
    mounted: function() {},
    methods: {
        // 上一页函数，
        prePage() {
            var page = this.pageNum
            page = page > 1 ? page - 1 : this.pageTotalNum
            this.pageNum = page
        },
        // 下一页函数
        nextPage() {
            var page = this.pageNum
            page = page < this.pageTotalNum ? page + 1 : 1
            this.pageNum = page
        },
        // 页面顺时针翻转90度。
        clock() {
            this.pageRotate += 90
        },
        // 页面逆时针翻转90度。
        counterClock() {
            this.pageRotate -= 90
        },
        // 页面加载回调函数，其中e为当前页数
        pageLoaded(e) {
            this.curPageNum = e
        },
        // 其他的一些回调函数。
        pdfError(error) {
            console.error(error)
        }
    }
}
</script>

<style lang="scss" scoped>
//scss
</style>
